<template>
	<view class="indexStyle">
		<view>
			<!-- 搜索跳转组件 -->
			<search />
		</view>
		<!-- 轮播图 -->
		<swiper class="swiper" circular indicator-dots indicator-active-color="#2ac2d2"
			indicator-color="rgba(249, 138, 124)" autoplay :interval="2000">
			<swiper-item v-for="item in CarouselImage">
				<navigator :url="'/pages/detail/detail?id='+item.link.id">
					<view>
						<image :src="item.imgUrl"></image>
					</view>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 滚动栏 -->
		<uni-notice-bar showIcon scrollable single :text="ShopData.text">
		</uni-notice-bar>
		<!-- 导航组 -->
		<view class="nav">
			<view v-for="item in NavigationData" :key="item.imgName">
				<navigator :url="'/pages/detail/detail?id='+item.link?.id" class="aaa">
					<image :src="item.imgUrl"></image>
					<text style="font-size: 26rpx;">{{item.text}}</text>
				</navigator>
			</view>
		</view>
		<!-- 广告专区 -->
		<image v-for="item in ImageData" :key="item.imgName" :src="item.imgUrl" class="imageStyle"></image>
		<!-- 富文本区 -->
		<rich-text :nodes="RichTextData.content"></rich-text>
		<!-- 商品组 -->
		<view v-for="item in ProductData" :key="item.goods_id">
			<navigator :url="'/pages/detail/detail?id='+item.goods_id" class="ProductStyle">
				<view class="images">
					<!-- aspectFit:保持图片纵向比，图片完全显示 -->
					<image mode="aspectFit" :src="item.goods_image"></image>
				</view>
				<view class="TextIntroduce">
					<view style="font-weight: 600;font-size: 24rpx;">{{item.goods_name}}</view>
					<view style="color: #a3a3a3;margin: 10rpx 0;font-size: 18rpx;">已销售{{item.goods_sales}}台</view>
					<br>
					<view style="color: #ea2c37;margin-top: 10rpx;font-size: 32rpx;">￥{{item.goods_price_min}}
						<text
							style="color: #ccc;text-decoration: line-through;font-size: 28rpx;">￥{{item.goods_price_max}}</text>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import search from '@/sea/search/index.vue'
	// 导入API
	import {
		indexApi
	} from '@/apis/index.js'
	// 导入uni-app组件
	// import {
	// 	onPageScroll
	// } from '@dcloudio/uni-app'
	// 导入内置方法
	import {
		ref,
		onMounted
	} from 'vue'
	const getList = async () => {
		let {
			data
		} = await indexApi()
		const list = data.pageData.items
		console.log(list);
		// 获取轮播图信息
		const CarouselData = list[1]
		CarouselImage.value = CarouselData.data
		// 接收店铺公告信息
		ShopData.value = list[2].params
		// 接收导航组数据
		NavigationData.value = list[3].data
		// 广告图片
		ImageData.value = list[4].data
		// 接收富文本数据
		RichTextData.value = list[5].params
		// 接收商品组数据
		ProductData.value = list[6].data
	}
	// 获取首页信息
	let CarouselImage = ref([]) //用于接收轮播图列表信息
	let ShopData = ref({}) //用于接收店铺公告信息
	let NavigationData = ref([]) //用于接收导航组数据
	let ImageData = ref([]) //广告图片
	let RichTextData = ref({}) //获取富文本提示区
	let ProductData = ref([]) //商品数据获取
	// 页面加载是调用
	onMounted(() => {
		getList()
	})
	// 页面滚动事件
	// onPageScroll((e) => {
	// 	console.log(e);
	// })
</script>

<style lang="scss">
	// 轮播图样式
	.swiper {
		height: 350rpx;

		image {
			width: 750rpx;
			height: 450rpx;
			transform: scale(1);
		}
	}

	// 滚动声明
	uni-notice-bar {
		background: "#525252";
		paddingTop: 0;
		textColor: "#ffffff";
	}

	// 导航
	.nav {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: #fff;

		.aaa {
			display: flex;
			flex-wrap: wrap;
			width: 135rpx;
			height: 150rpx;
			justify-content: center;

			image {
				width: 80rpx !important;
				height: 80rpx !important;
			}
		}
	}

	// 广告样式
	.imageStyle {
		width: 750rpx;
		height: 320rpx;
		margin-top: 10rpx;
	}

	// 商品组
	.ProductStyle {
		display: flex;
		background-color: #fff;
		width: 750rpx;
		margin-top: 10rpx;
		justify-content: space-between;

		.images {
			display: inline-block;
			width: 450rpx;
			height: 300rpx;
			// margin-right: 6rpx;
			margin-top: 20rpx;

			image {
				object-fit: cover;
				width: 330rpx;
				height: 250rpx;
			}
		}

		.TextIntroduce {
			margin-top: 20rpx;
			margin-left: 30rpx;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
		}
	}

	.indexStyle {
		background-color: #ccc;
	}
</style>